<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div :id="code" :style="'width: 100%;height: ' + height + ';'" />
  </el-card>
</template>

<script>
import theme from '@/components/ik/echarts/theme/ik.json'
import { dimensionExtraction, initSingleSeries } from '@/components/ik/echarts/dataProcess'
import * as echarts from 'echarts'

export default {
  name: 'IkBarRingChart',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    code: {
      type: String,
      default: 'bar.ring'
    },
    data: {
      type: Array,
      default: function() {
        return [
          { 'type': '类型1', 'dep': '部门1', 'value': '30' },
          { 'type': '类型1', 'dep': '部门2', 'value': '30' },
          { 'type': '类型1', 'dep': '部门1', 'value': '30' },
          { 'type': '类型4', 'dep': '部门2', 'value': '30' },
          { 'type': '类型4', 'dep': '部门1', 'value': '35' },
          { 'type': '类型4', 'dep': '部门2', 'value': '37' },
          { 'type': '类型6', 'dep': '部门1', 'value': '30' },
          { 'type': '类型6', 'dep': '部门2', 'value': '35' },
          { 'type': '类型6', 'dep': '部门1', 'value': '39' },
          { 'type': '类型7', 'dep': '部门1', 'value': '39' }
        ]
      }
    },
    // 数据分析维度 - 第一数据维度
    dataDimensionField: {
      type: String,
      default: 'value'
    },
    dataDimensionMin: {
      type: String,
      default: ''
    },
    dataDimensionMax: {
      type: String,
      default: ''
    },
    dataDimensionInterval: {
      type: String,
      default: ''
    },
    dataDimensionUom: {
      type: String,
      default: ''
    },
    gridType: {
      type: String,
      default: 'summary'
    },
    // 数据分析维度 - 第一分析维度 - 横坐标
    firstAnalysisDimensionField: {
      type: String,
      default: 'type'
    },
    firstAnalysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 数据分析维度 - 第二分析维度 - 图例
    secondAnalysisDimensionField: {
      type: String,
      default: ''
    },
    secondAnalysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 样式
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chartFirstAnalysisDimension: [],
      chartSecondAnalysisDimension: [],
      chartSeries: []
    }
  },
  mounted() {
    const $this = this
    // 初始化 chart 样式
    // 基于准备好的dom，初始化echarts实例
    const dom = document.getElementById($this.code)
    echarts.registerTheme('ik', theme)
    // 初始化组件，配合主题 - 'dark'
    const myChart = echarts.init(dom, 'ik')
    // 如果第一维度不存在，通过字段抽取
    if ($this.firstAnalysisDimension.length === 0) {
      // 第一维度必需
      if ($this.firstAnalysisDimensionField === '') {
        console.log('firstAnalysisDimensionField is null')
      }
      $this.chartFirstAnalysisDimension = dimensionExtraction($this.data, $this.firstAnalysisDimensionField)
    } else {
      $this.chartFirstAnalysisDimension = $this.firstAnalysisDimension
    }
    // 如果第二维度不存在，通过字段抽取
    if ($this.secondAnalysisDimension.length === 0) {
      // 第二维度非必需，填写则抽取
      if ($this.secondAnalysisDimensionField !== '') {
        $this.chartSecondAnalysisDimension = dimensionExtraction($this.data, $this.secondAnalysisDimensionField)
      }
    } else {
      $this.chartSecondAnalysisDimension = $this.secondAnalysisDimension
    }

    // 生成 series
    const series = initSingleSeries($this.data, $this.chartFirstAnalysisDimension, $this.chartSecondAnalysisDimension,
      $this.firstAnalysisDimensionField, $this.secondAnalysisDimensionField, $this.dataDimensionField, $this.gridType)

    // 生成数据轴数据
    const axis = {}
    if ($this.dataDimensionMin !== '') {
      axis['min'] = Number($this.dataDimensionMin)
    }
    if ($this.dataDimensionMax !== '') {
      axis['max'] = Number($this.dataDimensionMax)
    }
    if ($this.dataDimensionInterval !== '') {
      axis['interval'] = Number($this.dataDimensionInterval)
    }
    if ($this.dataDimensionUom !== '') {
      console.log('dataDimensionUom is null')
    }

    //
    const chartSeries = []
    for (const key in series) {
      chartSeries.push(
        {
          name: key,
          type: 'bar',
          coordinateSystem: 'polar',
          showBackground: true,
          data: series[key],
          stack: 'data'
        }
      )
    }

    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: $this.chartSecondAnalysisDimension
      },
      polar: {
      },
      radiusAxis: {
        type: 'category',
        data: $this.chartFirstAnalysisDimension
      },
      angleAxis: axis,
      series: chartSeries
    })
  },
  methods: {
    // 切换密码显示
  }
}
</script>

<style lang="scss" scoped>
// @import '../../../../../../../styles/robot/robot.scss';

</style>

